<template>  
    <div id="map"></div>
    12
  </template>
  <script setup>
  import cityExport from './cityExport.js';
  import * as echarts from 'echarts';
 console.log(cityExport.cityList[0].data)
 import data from '../../../public/static/anhui.json'
//  let data = () => import('../../../public/static/anhui.json')
 console.log(data.features[0].properties.center)
//   export default {
//     data() {
//       return {
//         isreturn: false, // 是否显示返回全国地图按钮
//         mapChart: null, //地图对象
//         mapOption: null,//地图属性
//         dataList: [ //地图标记经纬度坐标和code码,可只要经纬度
//           { name: "西藏", value: [91.23, 29.5, 2333] },
//           { name: "黑龙江", value: [128.03, 47.01, 1007] },
//         ],
//       }
//     },
//     mounted() {
//       this.getMap()
//     },
//     methods: {
//       getMap() { //地图
//         if (!this.mapChart) {
//           this.mapChart = this.$echarts.init(document.getElementById('map'));
//         }
//         this.mapOption = {
//           // 背景颜色
//           backgroundColor: "#00264e",
//           // 提示浮窗样式
//           tooltip: {
//             show: true,
//             trigger: "item",
//             alwaysShowContent: false,
//             backgroundColor: "#0C121C",
//             borderColor: "rgba(0, 0, 0, 0.16);",
//             hideDelay: 100,
//             triggerOn: "mousemove",
//             enterable: true,
//             textStyle: {
//               color: "#DADADA",
//               fontSize: "12",
//               width: 20,
//               height: 30,
//               overflow: "break",
//             },
//             showDelay: 100
//           },
//           map: 'china',
//           roam: true,//是否启缩放和平移
//           scaleLimit: {
//             min: 1,
//             max: 5
//           },
//           label: {
//             normal: {
//               show: true,
//               fontSize: '10',
//               color: '#fff'
//             }
//           },
//           // 地图配置
//           geo: {
//             map: "china",
//             label: {
//               // 通常状态下的样式
//               normal: {
//                 show: true,
//                 textStyle: {
//                   color: "#eee",
//                 },
//               },
//               // 鼠标放上去的样式
//               emphasis: {
//                 textStyle: {
//                   color: "#eee",
//                 },
//               },
//             },
//             // 地图区域的样式设置
//             itemStyle: {
//               normal: {
//                 borderColor: "#ccc",
//                 borderWidth: 1,
//                 areaColor: {
//                   type: "radial",
//                   x: 0.5,
//                   y: 0.5,
//                   r: 0.8,
//                   colorStops: [
//                     {
//                       offset: 0,
//                       color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
//                     },
//                     {
//                       offset: 1,
//                       color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
//                     },
//                   ],
//                   globalCoord: false, // 缺省为 false
//                 },
//                 shadowColor: "#457b9d",
//                 shadowOffsetX: -2,
//                 shadowOffsetY: 2,
//                 shadowBlur: 10,
//               },
//               // 鼠标放上去高亮的样式
//               emphasis: {
//                 areaColor: "#389BB7",
//                 borderWidth: 0,
//               },
//             },
//           },
//           series: [
//             {
//               name: '站点信息',
//               coordinateSystem: 'geo',
//               type: 'scatter',
//               geoIndex: 0,
//               itemStyle: {
//                 normal: {
//                   color: '#c23531'
//                 },
//                 emphasis: {
//                   borderColor: '#fff',
//                   borderWidth: 1,
//                   opacity: 0.5
//                 }
//               },
//               symbolSize: 12,
//               data: this.dataList
//             }
  
//           ],
//         };
//         // 地图注册，第一个参数的名字必须和option.geo.map一致
//         this.$echarts.registerMap('china', cityExport.china);
//         this.mapChart.setOption(this.mapOption);
//         //地图点位点击事件
//         this.mapChart.on('click', params => {
//           // 获取点击的省份名称
//           let provinceName = params.name
//           // 判断点击的省份是否有标记点 有则只显示该省的标记 否则会将其他省份的坐标点一起显示
//           this.dataList.map(item => {
//             if (item.name == provinceName) {
//               this.mapOption.series[0].data = [item];
//             }
//           })
//           // 进入省级地图
//           cityExport.cityList.map(value => {
//             if (value.name.indexOf(provinceName) !== -1) {
//               this.mapChart.clear();
//               this.mapOption.geo.map = 'Pmap';
//               this.$echarts.registerMap('Pmap', value.data)
//               this.mapChart.setOption(this.mapOption);
//               this.isreturn = true;
//             }
//           });
//         })
//       },
//       rebackMap() { //返回全国地图
//         this.mapChart.clear();
//         this.mapOption.series[0].data = this.dataList //重新标记
//         this.mapOption.geo.map = 'china';
//         this.$echarts.registerMap('china', cityExport.china);
//         this.mapChart.setOption(this.mapOption);
//         this.isreturn = false;
//       }
//     }
//   }
  </script>
  
  